<template>
  <form class="search" :class="[className, bordered ? 'bordered' : '']" :style="wrapperStyle" @submit.prevent="$emit('search', value!)">
    <input type="text" :value="value" @input="$emit('update:value', ($event.target as HTMLInputElement).value)" class="control" v-bind="$attrs" />
    <button type="submit" class="submitter">
      <GpFontIcon name="icon-sousuo1"></GpFontIcon>
    </button>
  </form>
</template>
<script lang="ts" setup>
import type { StyleValue } from 'vue';

defineOptions({
  name: 'GpSearchInput',
  inheritAttrs: false
})
const { value, className, wrapperStyle, bordered = true } = defineProps<{
  value?: string
  className?: string
  wrapperStyle?: StyleValue
  bordered?: boolean
}>()
defineEmits<{
  "update:value": [value: string]
  search: [value: string]
}>()
</script>
<style lang="less" scoped>
.search {
  box-sizing: border-box;
  width: 100%;
  height: 36px;
  position: relative;
  border-radius: 4px;
  padding-inline-start: 12px;
  padding-inline-end: 40px;
  transition-delay: .15s;
  transition-duration: .3s;
  &.bordered {
    border: 1px solid #CED4DB;
    &:focus-within,
    &:hover {
      border-color: var(--color-theme);
      box-shadow: 0 0 0 2px rgba(7, 104, 250, 0.1);
    }
  }
  .control,
  .submitter {
    border: none;
    outline: none;
    background: none;
    height: 100%;
  }
  .control {
    width: 100%;
    color: var(--color-primary);
    font-size: 14px;
    line-height: 14px;
    &::placeholder {
      color: var(--color-placeholder);
    }
  }
  .submitter {
    display: flex;
    margin: 0;
    padding-inline: 12px;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    color: #96969A;
    cursor: pointer;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: max-content;
    transition: .3s;
    &:hover {
      color: var(--color-theme);
    }
    :global(.iconfont) {
      font-size: inherit;
    }
  }
}
</style>
